// Learn TypeScript:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/typescript.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

import {model} from "../web/model/Model";
import {apiUtils} from "../web/api/ApiUtils";
import {GlobalObject} from "../game/GameVar";
import Confirm from "./confirm";
import {utils} from "../utils/utils";
import {SwimShopData} from "../web/model/SwimModel";
import Menu from "../menu/menu";
import {StatEvent, Statistic} from "../../statistic/statistic";

const {ccclass, property} = cc._decorator;

@ccclass
export default class SwimShopItem extends cc.Component {

  @property(cc.Button)
  private btnUse: cc.Button = null;
  @property(cc.Button)
  private btnUsed: cc.Button = null;
  @property(cc.Button)
  private btnMerge: cc.Button = null;
  @property(cc.Button)
  private btnGet: cc.Button = null;
  @property(cc.Label)
  private labelTitle: cc.Label = null;
  @property(cc.Label)
  private labelFragment: cc.Label = null;
  @property(cc.Sprite)
  private icon: cc.Sprite = null;

  private _data: SwimShopData;

  private _state = 0;//1 已拥有, 2 已使用, 3 可以合成, 4 没有

  get state(): number {
    return this._state;
  }

  set state(value: number) {
    if (value === this._state) {
      return;
    }
    this.setPieceVisible(false)
    switch (value) {
      //已经拥有, 未使用
      case 1:
        this.btnMerge.node.active = false;
        this.btnUsed.node.active = false;
        this.btnUse.node.active = true;
        this.btnGet.node.active = false;
        this.labelFragment.node.active = false;
        break;
      //已经使用
      case 2:
        this.btnMerge.node.active = false;
        this.btnUsed.node.active = true;
        this.btnUse.node.active = false;
        this.btnGet.node.active = false;
        this.labelFragment.node.active = false;
        break;
      //可以合成
      case 3:
        this.btnMerge.node.active = true;
        this.btnUsed.node.active = false;
        this.btnUse.node.active = false;
        this.btnGet.node.active = false;
        this.labelFragment.node.active = true;
        this.setPieceVisible(true)
        this.labelFragment.string = `${model.user.getItemNum(this._data.fragmentId)}/${this._data.mergeCount}`
        break;
      //没有
      case 4:
        this.btnMerge.node.active = false;
        this.btnUsed.node.active = false;
        this.btnUse.node.active = false;
        this.btnGet.node.active = true;
        this.labelFragment.node.active = true;
        this.setPieceVisible(true)
        this.labelFragment.string = `${model.user.getItemNum(this._data.fragmentId)}/${this._data.mergeCount}`
        break;
      //没有，不可合成
      case 5:
        this.btnMerge.node.active = false;
        this.btnUsed.node.active = false;
        this.btnUse.node.active = false;
        this.btnGet.node.active = true;
        this.labelFragment.node.active = false;
        break;
      case 6:
        this.btnMerge.node.active = true;
        this.btnUsed.node.active = false;
        this.btnUse.node.active = false;
        this.btnGet.node.active = false;
        this.labelFragment.node.active = false;
        this.setPieceVisible(true)
        break;
    }
    this._state = value;
  }

  private iconPiece: cc.Node = null

  onLoad() {
    this.icon.node.active = false;
    this.btnUsed.interactable = false;
  }

  private async getIconPiecePromise() {
    if (!this.iconPiece) {
      this.iconPiece = await utils.addPiece(this.icon) as any
      // this.iconPiece.x += 10
    }
    return this.iconPiece;
  }

  start() {
    cc.loader.loadRes(`icon/${this._data.id}`, (err, res) => {
      this.icon.spriteFrame = new cc.SpriteFrame(res);
      this.icon.node.active = true;
    });
  }

  set data(value: SwimShopData) {
    this._data = value;
    this.labelTitle.string = value.name;
    this.state = value.state;
  }

  onMerge() {
    if (this._state === 6) {
      this.node.emit('powerful-merge', this._data)
      return;
    }

    function showMerge(sc:SwimShopItem) {
      GlobalObject.confirm.getComponent(Confirm).showMerge("当前皮肤碎片充足。是否立即合成", () => {
        sc.node.emit('swim-merge', sc._data.id)
        // apiUtils.mergeItem(this._data.id);
        // GlobalObject.voiceSource.playCompose();
        // model.commonResult.once('0', () => {
        //   this._data.state = utils.getSwimState(this._data);
        //   this.state = this._data.state;
        //   this.node.emit("swim-get", this._data);
        // })
      });
    }

    showMerge(this)
  }

  onUse() {
    model.commonResult.once('0', () => {
      model.user.activeSwim = this._data.id;
      this.node.emit('swim-change')
    })
    apiUtils.useItem(this._data.id, 2)
  }

  onGet() {
    const way = this._data.way;
    Statistic.emit(StatEvent.BTN_SWIM_GET, {id: this._data.id})
    cc.director.loadScene('menu', () => {
      const menu = cc.director.getScene().getChildByName("menu").getComponent(Menu);
      menu.openBoard(way)
    })
  }

  setPieceVisible(visible: boolean) {
    this.getIconPiecePromise().then(res => {
      res.active = visible
    })
  }

}
